<template>
  <div
    class="canvas-home"
    :style="{
      backgroundColor: themeStyle[theme].backgroundColor1
    }"
  >
    <div class="canvas-tool-box">
      <CanvasToolBox />
    </div>
    <div class="main-canvas" @mousewheel="mouseWheelEvents($event)">
      <div id="bgCanvas" class="bg-canvas"></div>
      <div
        id="operateCanvas"
        class="operate-canvas"
        @keydown="spaceKeyDownEvents($event)"
        @keyup="spaceKeyUpEvents($event)"
      ></div>

      <TeleportContainer />

      <!-- 标尺 -->
      <div
        class="rulerHorizontal"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3,
          borderBottom: '1px solid ' + themeStyle[theme].borderColor1,
          width: isCanvasRuler ? '100%' : '0px'
        }"
      >
        <Ruler
          :direction="'horizontal'"
          :offset="canvasPosition.x"
          :unit-size="canvasScale * 100"
        />
      </div>
      <div
        class="rulerVertical"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3,
          borderRight: '1px solid ' + themeStyle[theme].borderColor1,
          height: isCanvasRuler ? '100%' : '0px'
        }"
      >
        <Ruler
          :direction="'vertical'"
          :offset="canvasPosition.y"
          :unit-size="canvasScale * 100"
          :text-offset-x="10"
          :text-offset-y="-4"
        />
      </div>
      <div
        class="rulerContainer"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor3,
          borderBottom: '1px solid ' + themeStyle[theme].borderColor1,
          borderRight: '1px solid ' + themeStyle[theme].borderColor1
        }"
        @click="isCanvasRuler = !isCanvasRuler"
      >
        <span>尺</span>
      </div>
      <template v-if="isShiftRDown">
        <ReferenceLine />
      </template>

      <!-- 完成按钮 -->
      <motion.div
        v-if="isEdgeEdit || isFreeAreaEdit"
        :initial="{ y: -30, opacity: 0 }"
        :animate="{ y: 0, opacity: 1 }"
        :transition="{ duration: 0.5 }"
        class="complete-btn"
      >
        <Button type="primary" size="small" ghost @click="canvasCompleteEdit">
          <span
            :style="{
              color: themeStyle[theme].textColor2
            }"
            >完成编辑</span
          >
        </Button>
      </motion.div>

      <!-- 搜索框 -->
      <div class="search-box">
        <SearchBox />
      </div>

      <!-- 底部模式切换栏 -->
      <div class="bottom-model-switch">
        <ModelSwitch />
      </div>

      <!-- 拖拽布局时，设置的误触区域 -->
      <div class="no-drag-left"></div>
      <div class="no-drag-right"></div>
      <div class="no-drag-bottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import CanvasToolBox from './CanvasToolBox.vue'
import SearchBox from './SearchBox.vue'
import { initCanvas, initRuler, registerNodeAndEdge } from '@renderer/store/canvas/canvasInstance'
import {
  initCanvasEvents,
  spaceKeyDownEvents,
  spaceKeyUpEvents,
  mouseWheelEvents
} from '@renderer/store/canvas/canvasEvents'
import { canvasCompleteEdit } from '@renderer/store/canvas/otherFun'
import { onMounted } from 'vue'
import { Button } from 'ant-design-vue'
import { useCanvasParameterStore } from '@renderer/store/canvas/canvasParameter'
import { motion } from 'motion-v'
import { getTeleport } from '@antv/x6-vue-shape'
import Ruler from '@renderer/components/ruler/Ruler.vue'
import ReferenceLine from './ReferenceLine.vue'
import ModelSwitch from './ModelSwitch.vue'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)
const canvasParameterStore = useCanvasParameterStore()
const { isFreeAreaEdit, isEdgeEdit, canvasPosition, canvasScale, isCanvasRuler, isShiftRDown } =
  storeToRefs(canvasParameterStore)

const TeleportContainer = getTeleport()

onMounted(() => {
  //初始化画布
  initCanvas()
  //初始化监听事件
  initCanvasEvents()
  //注册节点
  registerNodeAndEdge()

  //初始化标尺
  initRuler()
})
</script>

<style scoped lang="scss">
.canvas-home {
  width: 100%;
  height: 100%;
  :deep(.x6-widget-selection-box) {
    border: none;
    box-shadow: none;
  }
  :deep(.x6-widget-transform) {
    margin: -1px 0 0 -1px;
    padding: 0;
    border: 1px solid #239edd;
    border-radius: 6px;
  }
  :deep(.x6-widget-transform > div) {
    border: 1px solid #239edd;
  }
  :deep(.x6-widget-transform > div:hover) {
    background-color: #3dafe4;
  }
  :deep(.x6-widget-transform-active-handle) {
    background-color: #3dafe4;
  }
  :deep(.x6-widget-transform-resize) {
    border-radius: 0;
  }

  .canvas-tool-box {
    width: 100%;
  }

  .main-canvas {
    height: calc(100% - 70px);
    width: 100%;
    position: relative;
    .bg-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .operate-canvas {
      width: 100%;
      height: 100%;
    }

    .rulerContainer {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      font-size: 12px;
      color: #808080;
      line-height: 20px;
      text-align: center;
      user-select: none;
      cursor: pointer;
    }
    .rulerHorizontal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 20px;
      transition: all 0.5s ease-in-out;
    }
    .rulerVertical {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 100%;
      transition: all 0.5s ease-in-out;
    }

    .no-drag-left {
      position: absolute;
      height: 100%;
      width: 5px;
      background-color: transparent;
      top: 0px;
      left: 0px;
    }
    .no-drag-right {
      position: absolute;
      height: 100%;
      width: 5px;
      background-color: transparent;
      top: 0px;
      right: 0px;
    }
    .no-drag-bottom {
      position: absolute;
      width: 100%;
      height: 5px;
      background-color: transparent;
      bottom: 0px;
      left: 0px;
    }

    .complete-btn {
      position: absolute;
      top: 30px;
      left: calc(50% - 60px);
    }

    .search-box {
      position: absolute;
      top: 30px;
      right: 10px;
      width: 300px;
      height: 25px;
    }

    .bottom-model-switch {
      position: absolute;
      bottom: 10px;
      left: calc(50% - 50px);
      width: 100px;
      height: 35px;
    }
  }
}
</style>
